<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>loading07</title>
</head>
<link rel="stylesheet" href="../common.css">
<style>
  :root {
    --l: 100px;
    --border: orange;
  }

  .cube {
    transform-style: preserve-3d;
    transform: rotateX(-35deg) rotateY(30deg);
    position: relative;
    width: var(--l);
    height: var(--l);
    animation: rotate 2s infinite linear;
  }

  .cube .rect {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border: 1px solid var(--border);
    transform-style: preserve-3d;
  }


  .cube .front {
    /* border-color: #77da1b; */
    transform: translateZ(calc(var(--l) * 0.5));
  }

  .cube .bottom {
    /* border-color: #1545ad; */
    transform: rotateX(-90deg) translateZ(calc(var(--l) * 0.5));
  }

  .cube .top {
    /* border-color: red; */
    transform: rotateX(90deg) translateZ(calc(var(--l) * 0.5));
  }

  .cube .left {
    /* border-color: #18b4a7; */
    transform: rotateY(-90deg) translateZ(calc(var(--l) * 0.5));
  }

  .cube .right {
    /* border-color: #510f77; */
    transform: rotateY(90deg) translateZ(calc(var(--l) * 0.5));
  }

  .cube .back {
    /* border-color: #fff; */
    transform: translateZ(calc(var(--l) * (-0.5)));
    /*  transform: translateZ(-calc(var(--l) * 0.5)); */
  }

  /* @keyframes rotate {
    0% {
      transform: rotateX(-35deg) rotateY(30deg);
    }

    100% {
      transform: rotateX(-35deg) rotateY(130deg);
    }
  } */
  .cube2 {
    position: relative;
    width: var(--l);
    height: var(--l);
    margin-top: 50px;
  }

  .cube2 .rect {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border: 1px solid var(--border);
    transform-style: preserve-3d;
    transform: rotateZ(45deg) skew(-12deg, -12deg);
  }

  .cube2 .top {
    transform: rotateZ(45deg) skew(-12deg, -12deg);
  }

  .cube2 .right {
    transform: rotateZ(110deg) skew(-12deg, -12deg) translateY(-100px);
  }

  .cube2 .bottom {
    transform: rotateZ(356deg) skew(-12deg, -12deg) translateX(100px) translateY(180px);
  }
</style>

<body>
  <section>
    <div class="cube">
      <div class="top rect"></div>
      <div class="right rect"></div>
      <div class="bottom rect"></div>
      <div class="left rect"></div>
      <div class="front rect"></div>
      <div class="back rect"></div>
    </div>
    <div class="cube2">
      <div class="top rect"></div>
      <div class="right rect"></div>
      <div class="bottom rect"></div>
      <div class="left rect"></div>
      <div class="front rect"></div>
      <div class="back rect"></div>
    </div>
  </section>

</body>

</html>